<template>
	<div>
		<el-button type="primary" :loading="exportLoading" @click="handleExport"> 导出excel </el-button>
		<el-table border highlight-current-row :data="tableData">
			<el-table-column prop="name" label="姓名"> </el-table-column>
			<el-table-column prop="age" label="年龄"> </el-table-column>
			<el-table-column prop="gender" label="性别"> </el-table-column>
			<el-table-column prop="mobilePhone" label="手机号"> </el-table-column>
			<el-table-column prop="email" label="电子邮箱"> </el-table-column>
			<el-table-column prop="graduationDate" label="毕业时间"> </el-table-column>
			<el-table-column prop="isMarry" label="婚否"> </el-table-column>
		</el-table>
	</div>
</template>

<script>
import { exportExcel } from '@/utils/excle'

const tableData = [
	{
		name: '张三',
		age: 21,
		gender: '男',
		mobilePhone: '15999999991',
		email: '',
		graduationDate: '2005/07/01',
		isMarry: '否',
	},
	{
		name: '赵六',
		age: 20,
		gender: '男',
		mobilePhone: '',
		email: '1235@qq.com',
		graduationDate: '2011/08/10',
		isMarry: '是',
	},
	{
		name: '李四',
		age: 30,
		gender: '',
		mobilePhone: '15999999939',
		email: '1236@qq.com',
		graduationDate: '1997/06/05',
		isMarry: '否',
	},
	{
		name: '王五',
		age: 28,
		gender: '男',
		mobilePhone: '15999999996',
		email: '12387777777777777777777777@qq.com',
		graduationDate: '1998/06/05',
		isMarry: '是',
	},
]

export default {
	data() {
		return {
			exportLoading: false,
			tableData,
		}
	},
	methods: {
		handleExport() {
			const header = ['姓名', '年龄', '性别', '电话', '电子邮箱', '毕业时间', '婚否']
			exportExcel(header, this.tableData, '数据表')
		},
	},
}
</script>

<style scoped>
.el-table {
	margin-top: 20px;
}
</style>
